import { specListByGoodsId } from '@/services/stock-goods/subApi';
import { GoodsScope, GoodsStatus } from '@/utils/constants';
import { showMsg } from '@/utils/utils';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Checkbox, Descriptions, Modal, Tag } from 'antd';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import { useRef, useState } from 'react';

const GoodsDetail = (props: any) => {
  const {
    record = {},
    handleModalVisible
  } = props;

  const columns: ProColumns<any>[] = [
    {
      title: '规格编号',
      dataIndex: 'specs_no',
      width: 100
    },
    {
      title: '规格',
      dataIndex: 'specs_name',
      width: 200,
    },
    {
      title: '计量单位',
      dataIndex: 'unit'
    },
    {
      title: '库存',
      dataIndex: 'inventory',
      align: 'right',
      valueType: 'digit',
    },
    {
      title: '预警值',
      dataIndex: 'warn_inventory',
      align: 'right',
      valueType: 'digit',
    },
    {
      title: '待出库',
      dataIndex: 'wait_inventory',
      align: 'right',
      valueType: 'digit',
    },
    {
      title: '销量',
      dataIndex: 'salves_volume',
      align: 'right',
      valueType: 'digit',
    },
    {
      title: '销售价',
      dataIndex: 'selling_price',
      align: 'right',
      valueType: 'money',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (_: any, record: STOCKGOODSAPI.GoodsSpecsItem) => {
        return record.status === 'N' ? '正常' : '作废';
      }
    }
  ]

  const actionRef = useRef<ActionType>();
  const [stockAlert, setStockAlert] = useState<'Y'>();

  const filterProducts = (e: CheckboxChangeEvent) => {
    setStockAlert(e.target.checked ? 'Y' : undefined);
    actionRef.current?.reload();
  };

  return <Modal
    title="商品详情"
    width="80%"
    footer={null}
    maskClosable={false}
    onCancel={() => handleModalVisible(false)}
    bodyStyle={{ maxHeight: 'calc(94vh - 78px)', overflowY: 'auto' }}
    visible>
    <div className="dialog">
      <Descriptions column={5}>
        <Descriptions.Item label="商品分类">{record.class_name}</Descriptions.Item>
        <Descriptions.Item label="品牌">{record.brand_name}</Descriptions.Item>
        <Descriptions.Item label="名称">{record.goods_name}</Descriptions.Item>
        <Descriptions.Item label="商品检索码">{record.goods_py}</Descriptions.Item>
        <Descriptions.Item label="商品编号">{record.goods_id}</Descriptions.Item>
        <Descriptions.Item label="库存总量">{record.total_inventry}</Descriptions.Item>
        <Descriptions.Item label="待出库">{record.wait_inventory}</Descriptions.Item>
        <Descriptions.Item label="销量">{record.salves_volume}</Descriptions.Item>
        <Descriptions.Item label="供应范围">{GoodsScope[record.scope as string]}</Descriptions.Item>
        <Descriptions.Item label="状态">
          <Tag color="success">{GoodsStatus[record.goods_status as string]}</Tag>
          {
            record.warn_flag === 'Y' && <Tag color="warning">库存告警</Tag>
          }
        </Descriptions.Item>
      </Descriptions>

      <ProTable
        rowKey="specs_id"
        actionRef={actionRef}
        columns={columns}
        title={() => <>
          商品规格&emsp;&nbsp;&nbsp;
          <Checkbox style={{ fontSize: 12, fontWeight: 'normal', userSelect: 'none' }} onChange={filterProducts}>只查看库存告警商品</Checkbox>
        </>}
        className="update-goods-table"
        request={async params => {
          try {
            const res = await specListByGoodsId({ ...params, goods_id: record.goods_id, is_eng: stockAlert });
            return { success: true, data: res.record_list, total: res.sum_record_num };
          } catch (err: any) {
            showMsg(err?.data?.msg);
            return { success: false, data: [] };
          }
        }}
        pagination={{ current: 1, pageSize: 10 }}
        search={false}
        toolBarRender={false}
        rowClassName={record => record.inventory < record.warn_inventory ? 'update-bg' : ''}
        bordered />
    </div>
  </Modal>
}
export default GoodsDetail;
